<template>
    <div class="page-search">
        <YForm :formItems="formItems" :cols="searchFormConfig.cols" v-model:form-model="formData" >
            <template #header-title>
                <div class="search-title">
                    <h3>高级检索</h3>
                </div>
            </template>
            <template #header-footer>
                <div class="search-footer">
                    <div>
                        <a-button type="primary" @click="handleQueryClick">
                            <template #icon><SearchOutlined /></template>
                            搜索
                        </a-button>
                    </div>
                    <div>
                        <a-button type="default" @click="handleResetClick">
                            <template #icon>
                                <ClearOutlined/>
                            </template>
                            清空
                        </a-button>
                    </div>
                </div>
            </template>
        </YForm>
    </div>
</template>

<script setup lang="ts">

import YForm, {IFormItem} from "@/base-ui/form";
import {ref} from "vue";

const props = withDefaults(defineProps<{
    searchFormConfig: Record<string, any>
}>(), {
    searchFormConfig: () => {
        return {}
    }
})

const emits = defineEmits<{
    (e: "resetBtnClick", formData:any): void,
    (e: "queryBtnClick", formData:any): void
}>();

const formItems = props.searchFormConfig?.formItems ?? [];

const formOriginData: any= {}
for (const item of formItems) {
    if (item.type === 'select' || item.type === 'range-datepicker' || item.type === 'range-timepicker'){
    }else{
        formOriginData[item.field] = "";
    }
    if (item.value){
        formOriginData[item.field] = item.value;
    }
}
const formData = ref(formOriginData);

const handleResetClick = () => {
    formData.value = formOriginData
    emits('resetBtnClick', formData);
}


const handleQueryClick = () => {
    console.log("handlerQueryClick", formData.value)
    emits('queryBtnClick', formData.value);
}

</script>

<style scoped lang="less">
.page-search{
    width: 100%;

    .search-title{
        width: 100%;
        display: flex;
        margin-bottom: 20px;
        margin-left: 10px;
    }

    .search-footer{
        width: 100%;
        display: flex;
        justify-content: center;

        div{
            width: 200px;
        }
    }
}
</style>
